<template>
<div class="box">
  <ul class="top">
    <li ref="yi" @click="jumpa()">商品</li>
    <li ref="er" @click="jumpb()">评价</li>
  </ul>
  <div class="xia">
   <router-view>
   </router-view>

  </div>

</div>
</template>

<script>
export default {
  methods: {
    jumpa () {
      // console.log('hahaha')
      // console.log(this.detail)
      this.$refs.yi.style.backgroundColor = 'skyblue'
      this.$refs.er.style.backgroundColor = ''
      this.$router.push({
        name: 'detail',
        params: {ID: this.$route.params.id}
      })
    },
    jumpb () {
      // console.log('hahaha')
      this.$refs.yi.style.backgroundColor = ''
      this.$refs.er.style.backgroundColor = 'skyblue'
      this.$router.push({
        name: 'comment',
        params: {com: this.$route.params.id}
      })
    }
  },
  mounted () {
    // console.log(this.$route)
    this.$refs.yi.style.backgroundColor = 'skyblue'
  },
  data () {
    return {
      detail: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // console.log(vm.$route)
      vm.$http.getProductDetail(vm.$route.params.id)
        .then(resp => {
          if (resp.data.code === 200) {
            vm.detail = resp.data.data
            vm.$router.push({
              name: 'detail',
              params: {
                ID: vm.$route.params.id
              }
            })
          }
        })
    })
  }
}
</script>

<style scoped lang="scss">
  .top{
    margin-top:50px;
    width: 100%;
    height: 40px;
    display: flex;
    line-height: 40px;
    li{
      text-align:center;
      font-weight: 600;
      flex:1;
      list-style: none;
    }
  }
  .xia{
    width:100%;
    // height: 1000px;
    background-color: #ccc;
  }
</style>
